<!--
 * @Description: 选课中心
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-10 00:34:31
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-12-06 21:21:45
 * @FilePath: /lieshou-app/pages/course_selection.vue
-->

<template>
	<view class="menu-box">
		<z-nav title="选课中心" :showBack="true" color="#333"></z-nav>
		<view class="menu-list">
			<!-- 左侧菜单栏 -->
			<view class="list-left-box">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="list-item-title">{{item.name}}</view>

					<view class="list-card-box" v-for="(items,indexs) in item.labels" :key="indexs"
						@click="getLeftTab(items)">
						<view class="list-card-bottom">
							<view class="list-card-bottom-title">{{items.name}}</view>
							<image class="list-card-border" v-if="menuCurrent===items.index"
								src="@/static/image/icon/xz.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 右侧数据 -->
			<view class="">

				<scroll-view class="list-right-box" scroll-y="true" :scroll-into-view="clickId" :scroll-anchoring="true"
					scroll-with-animation @scroll="rightScrollEvt" @scrolltolower="handleScrollToLower">
					<view class="list-item" v-for="(item,cindex) in list" :key="cindex">

						<view v-for="(label,index) in item.labels" :key="index" class="list-card"
							:id="'tab' + label.id">
							<view style="height: 2px;"></view>
							<view class="list-card-title">{{item.name}} {{label.name}}</view>
							<!-- 这里区分是否存在课程 -->
							<block v-if="label.courses&&label.courses.length>0">
								<view v-for="(items,indexs) in label.courses" :key="indexs" class="list-card-box"
									@click="getListItem(item,items)">
									<view class="list-card-item">
										<image :src="items.cover" alt="" />
									</view>
									<view class="list-card-item-bottom">
										<view class="activity-list-bottom-tag">
											<view class="activity-list-bottom-fu"></view>
											<view class="activity-list-bottom-date">
												已有{{items.init_finish}}人早于你完成学习，{{items.recommend}}</view>
										</view>
										<!-- <view class="btn">开始学习</view> -->
									</view>
								</view>
							</block>
							<block v-else>
								<view class="none-gap">
									<uv-empty mode="data" width="90" height="90" text='暂无数据'
										icon="http://cdn.uviewui.com/uview/empty/data.png">
									</uv-empty>
								</view>
							</block>
							<!-- <view v-if="gapShow||label.courses&&label.courses.length===0" style="height:1150rpx;"></view> -->
						</view>

					</view>
					<view style="height: 800rpx;"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import zNav from '@/components/z-nav.vue';
	export default {
		components: {
			zNav
		},
		data() {
			return {
				gapShow: false,
				list: [], //数据
				clickId: '', //点击选项的id
				menuCurrent: 0, // 左侧选中选项的index
				currentIndex: 0, // 右边当前滚动的index
				itemArr: [], //用于存放右侧item位置数据
				scrollRightTop: 0,
			}
		},
		methods: {
			handleScrollToLower(e) {
				console.log('===', e)

			},
			// 左侧切换点击事件
			getLeftTab(e) {
				this.clickId = 'tab' + e.id;
				this.menuCurrent = e.index;
				this.$forceUpdate()
			},
			// labels  暂时方案，抽空优化
			addIndex(array, parentIndex = 0) {
				return array.map((item, index) => {
					item.index = parentIndex + index; // 使用累加的索引值
					if (item.labels && item.labels.length) {
						if (item.index == 0) {
							item.labels = this.addIndex(item.labels, item.index);
						} else if (item.index == 1) {
							item.labels = this.addIndex(item.labels, array[item.index - 1].labels.length);
						} else if (item.index == 2) {
							item.labels = this.addIndex(item.labels, (array[item.index - 1].labels.length) + array[
								item.index - 2].labels.length);
						} else if (item.index == 3) {
							item.labels = this.addIndex(item.labels, (array[item.index - 1].labels.length) + (
								array[item.index - 2].labels.length) + array[item.index - 3].labels.length);
						} else if (item.index == 4) {
							item.labels = this.addIndex(item.labels, (array[item.index - 1].labels.length) + (
								array[item.index - 2].labels.length) + (array[item.index - 3].labels
								.length) + array[item.index - 4].labels.length);
						} else if (item.index == 5) {
							item.labels = this.addIndex(item.labels, (array[item.index - 1].labels.length) + (
									array[item.index - 2].labels.length) + (array[item.index - 3].labels
									.length) + array[item.index - 4].labels.length + array[item.index - 5]
								.labels.length);
						} else if (item.index == 6) {
							item.labels = this.addIndex(item.labels, (array[item.index - 1].labels.length) + (
									array[item.index - 2].labels.length) + (array[item.index - 3].labels
									.length) + array[item.index - 4].labels.length + array[item.index - 5]
								.labels.length + array[item.index - 6].labels.length);
						}
					}
					return item;
				});
			},

			// 跳转详情
			getListItem(item, items) {
				console.log('右侧', item, items.has_rights)
				if (!items.has_rights) {
					uni.navigateTo({
						url: "/pages/course_details?id=" + items.id + "&name=" + items.name + '&has_rights=' +
							items.has_rights
					})
				} else {
					// 无权益
					uni.navigateTo({
						url: "/pages/video_details?id=" + items.id + "&name=" + items.name + '&has_rights=' + items
							.has_rights
					})
				}
			},
			// 右侧滑动事件
			rightScrollEvt(e) {
				// uni.$uv.debounce(() => {
				this.currentIndex = this.itemArr.findLastIndex(ele => {
					return e.detail.scrollTop >= ele.bottom - 260
				}) + 1;
				if (this.currentIndex == -1) this.currentIndex = 0;
				if (this.currentIndex == this.menuCurrent) return;
				this.menuCurrent = this.currentIndex;
				this.$forceUpdate()
				// }, 300)
			},
			// 计算右侧每个item到顶部的距离，存放到数组
			getBoxItemTop() {
				new Promise(resolve => {
					let selectQuery = uni.createSelectorQuery();
					selectQuery.selectAll('.list-card').boundingClientRect(rect => {
						if (!rect.length) {
							this.getBoxItemTop();
							return;
						}
						rect.forEach(ele => {
							this.itemArr.push(ele);
							resolve();
						})
						console.log(this.itemArr);
					}).exec()
				})
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~ ', '', '')
			// #endif
			this.$apis.getCoursesAll({}).then((element) => {
				// 输出日志
				// this.$utils.showLog('获取所有课程', element.list)
				let list = this.addIndex(element.list)
				this.$forceUpdate()
				// return
				this.$nextTick(() => {
					console.log('element.list', element.list)
					this.list = list
					this.getBoxItemTop();
				})
			}).catch((e) => {
				// this.$utils.showToast('登录过期请稍后尝试！', 1000)
			})

		}
	}
</script>

<style lang="scss" scoped>
	.menu-box {
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.menu-list {
		flex: 1;
		display: flex;
		border-top: 2rpx solid rgba(246, 168, 209, 1);
		overflow: hidden;

		// 左侧菜单栏
		.list-left-box {
			height: 100%;
			width: auto;
			border-right: 2rpx solid rgba(246, 168, 209, 1);
			overflow: auto;
			width: 182rpx;
			opacity: 1;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3);

			.list-item {
				padding: 14rpx 15rpx 30rpx 15rpx;

				.list-item-title {
					margin-bottom: 26rpx;
					font-size: 28rpx;
					margin-left: 3rpx;
					font-weight: 700;
					letter-spacing: 0px;
					color: rgba(0, 0, 0, 1);
					text-align: left;
				}

				.list-card-box {
					font-size: 24rpx;
					height: 34rpx;
					position: relative;
					line-height: 34rpx;
					// margin-bottom: 20rpx;
					margin-bottom: 22rpx;

					.list-card-bottom {
						// width: 100%;
						// height: 34rpx;
						// margin: 20rpx 0rpx 0rpx 30rpx;
						// display: inline-block;
						display: inline-block;
						width: auto;
						// text-align: center;
						position: relative;

						.list-card-border {
							// width: 100%;
							width: 180rpx;
							height: 35rpx;
							position: absolute;
							top: 3rpx;
							z-index: 1;
							left: -17rpx;
							will-change: transform, filter;
							border-radius: 10rpx;
							// background: rgba(252, 205, 229, 1);
							// opacity: 1;
							// filter: blur(6rpx);
						}

						.list-card-bottom-title {
							font-size: 24rpx;
							text-align: left;
							margin-left: 4rpx;
							position: relative;
							z-index: 3;
							// bottom: 30rpx;
							color: rgba(0, 0, 0, 1);

							font-weight: 300;
						}


					}
				}
			}
		}

		flex: 1;
		height: 100%;
		overflow: auto;

		// 右侧数据
		.list-right-box {
			// flex: 1;
			height: 100%;
			width: 514rpx;
			padding-left: 22rpx;
			overflow: auto;

			.list-item {
				.list-card {

					// margin-bottom: 40rpx;
					.none-gap {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 300rpx;
					}

					.list-card-title {
						font-size: 24rpx;
						font-weight: 400;
						color: #545353;
						margin: 14rpx 0 20rpx 0;
					}

					.list-card-box {
						margin-bottom: 38rpx;
						background-color: #fff;
						border-radius: 6rpx;
						border: 0.75px solid rgba(235, 236, 237, 1);

						.list-card-item {
							height: 244rpx;
							overflow: hidden;
							width: 100%;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						.list-card-item-bottom {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-top: 25rpx;

							.activity-list-bottom-tag {
								// width: 100%;
								// height: 34rpx;
								// margin: 20rpx 0rpx 0rpx 30rpx;
								// display: inline-block;
								display: inline-block;
								width: auto;
								// text-align: center;
								// height: 34rpx;
								padding-left: 10rpx;
								position: relative;
								bottom: 27rpx;
								padding-top: 10rpx;

								.activity-list-bottom-fu {
									width: auto;
									height: 14rpx;
									position: relative;
									top: 24rpx;
									border-radius: 10rpx;
									background: rgba(252, 205, 229, 1);
									opacity: 1;
									filter: blur(6rpx);
								}

								.activity-list-bottom-date {
									font-size: 20rpx;
									font-weight: 600;
									margin-left: 5rpx;
									width: auto;
									text-align: left;
									overflow: hidden;
									text-overflow: ellipsis;
									line-height: 35rpx;
									padding-right:5rpx;
									/* 弹性伸缩盒子模型的显示 */
									display: -webkit-box;
									/* 限制在一个块元素显示的文本的行数 */
									-webkit-line-clamp: 2;
									/* 设置或检索伸缩盒对象的子元素的排列方式 */
									-webkit-box-orient: vertical;
									position: relative;
									// text-align: center;
									// bottom: 30rpx;
									color: rgba(0, 0, 0, 1);
									vertical-align: top;
								}


							}

							.btn {
								position: relative;
								bottom: 13rpx;
								width: auto;
								margin-right: 25rpx;
								font-size: 19rpx;
								font-weight: 500;
								padding: 6rpx 12rpx;
								color: rgba(255, 255, 255, 1);
								text-align: center;
								vertical-align: top;
								border-radius: 30rpx;
								background: rgba(0, 0, 0, 1);
							}
						}
					}
				}
			}
		}
	}
</style>